<template>
  <div class="MyInfo">
    <div class="MyInfo-contain">
      <div class="header">
        <div :style="{paddingTop: '10px'}">
          <Breadcrumb :breadcrumb="breadcrumb" />
        </div>
      </div>
      <div class="main">
        <div class="main-left">
          <el-menu class="el-menu-vertical-demo" text-color="#32aefd" :default-active="active" :default-openeds="['1']" @select="handleSelect">
            <el-submenu index="1">
              <template #title>
                <span>
                  <i class="iconfont icon-user1" :style="{paddingRight:'7px', fontSize: '16px'}" />账号与服务
                </span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">基本资料</el-menu-item>
                <el-menu-item index="1-2">实名认证</el-menu-item>
                <el-menu-item index="1-3">会员权益</el-menu-item>
                <el-menu-item index="1-4">会员积分</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- <el-submenu index="2">
              <template #title>
                <span>
                  <i class="iconfont icon-File" :style="{paddingRight:'7px', fontSize: '16px'}" />产品与服务
                </span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1">工作区</el-menu-item>
                <el-menu-item index="2-2">我的模板</el-menu-item>
                <el-menu-item index="2-3">我的组件</el-menu-item>
                <el-menu-item index="2-4">我的图标</el-menu-item>
                <el-menu-item index="2-5">我的SDK</el-menu-item>
              </el-menu-item-group>
            </el-submenu> -->
          </el-menu>
        </div>
        <div class="main-right">
          <render-right :currentTab="currentTab" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb";
import RenderRight from "./RenderRight.vue";

export default {

  components: {
    Breadcrumb,
    RenderRight
  },
  computed: {
    active () {
      if (this.$route.params.select) {
        return this.$route.params.select;
      }
      return '1-1';
    }
  },
  data () {
    return {
      currentTab: !this.$route.params.select ? '1-1' : this.$route.params.select,
      breadcrumb: [
        { title: '天鹿市场', to: '/index' },
        { title: '用户中心', to: '' }
      ]
    };
  },
  methods: {
    handleSelect (e) {
      this.currentTab = e;
    },

  },
}
</script>
<style lang='scss' scoped src="./index.scss" />
